<template>
	<div class="login-box">
		<el-form
			ref="loginFormRef"
			:model="loginForm"
			status-icon
			:rules="rules"
			label-width="70px"
			class="loginForm"
		>
			<h1>后台管理系统</h1>
			<el-form-item label="账号:" prop="userName">
				<el-input v-model="loginForm.userName" autocomplete="off" />
			</el-form-item>
			<el-form-item label="密码:" prop="password">
				<el-input
					v-model="loginForm.password"
					type="password"
					autocomplete="off"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					@click="submitForm(loginFormRef)"
					class="sub-btn"
					>登录</el-button
				>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts">
import { FormInstance } from 'element-plus'
import { defineComponent, toRefs, reactive } from 'vue'
import { InitData } from '../types/login'
import { login } from '../http/api'
import { useRouter } from 'vue-router'

export default defineComponent({
	setup() {
		const data = reactive(new InitData())
		const router = useRouter()

		// 表单校验规则
		const rules = {
			userName: [
				{
					required: true,
					message: '请输入账号',
					trigger: 'blur'
				},
				{
					min: 6,
					max: 24,
					message: '账号长度需要在6-24之间',
					trigger: 'blur'
				}
			],
			password: [
				{
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				},
				{
					min: 6,
					max: 24,
					message: '密码长度需要在6-24之间',
					trigger: 'blur'
				}
			]
		}

		// 登录逻辑
		const submitForm = (loginFormRef: FormInstance) => {
			loginFormRef.validate((valid: boolean) => {
				// 验证通过
				if (valid) {
					login(data.loginForm).then((res) => {
						// console.log(res)
						localStorage.setItem('token', res.data.token)
						router.push('/')
					})
				}
			})
		}

		return {
			...toRefs(data),
			rules,
			submitForm
		}
	}
})
</script>

<style lang="scss" scoped>
.login-box {
	width: 100%;
	height: 100%;
	background: url('../assets/bg.png') no-repeat;
	background-size: 100% 100%;
	padding-top: 200px;
	.loginForm {
		width: 450px;
		padding: 20px;
		background: #ffd89b;
		background: -webkit-linear-gradient(
			to right,
			rgb(255, 216, 155),
			rgb(25, 84, 123)
		);
		background: linear-gradient(to right, rgb(255, 216, 155), rgb(25, 84, 123));
		border-radius: 20px;
		margin: 0 auto;
	}
	.sub-btn {
		width: 100%;
	}

	h1 {
		text-align: center;
		margin: 20px 0;
	}
}
</style>
